<template>
  <div ref="testCon"></div>
</template>

<script lang="ts" setup>
import * as THREE from 'three'
import { onMounted, ref } from 'vue'

console.log(THREE)

const testCon = ref<HTMLElement>()

const getThreeJs = () => {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  if (testCon.value) testCon.value.appendChild(renderer.domElement)

  const geometry = new THREE.BoxGeometry()
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)

  camera.position.z = 5

  const animate = function () {
    requestAnimationFrame(animate)

    cube.rotation.x += 0.01
    cube.rotation.y += 0.01

    renderer.render(scene, camera)
  }

  animate()
}

onMounted(() => {
  getThreeJs()
})
</script>

<style lang="scss" scoped></style>
